import React, { useState } from 'react'
import './MydesignCenZP.css'
// 封装的数据
import ImagesConList from '../../ImagesConList/ImagesConList';
// 实现移入移出遮罩的组件
import ImageOverlay from '../../ImageOverlay/ImageOverlay';
// 数据的操作
import DesignDate from '../../MydesignOperate/DesignDate'
// 编辑的操作
import DesignEdit from '../../MydesignOperate/DesignEdit'
// 推广的操作
import DesignPromotion from '../../MydesignOperate/DesignPromotion'
const tabsNav = ['全部', 'H5', '海报', '长页', '表单', '互动', '电子画册', '视频'];
const Index: React.FC = () => {
  // // tab切换 事件
  const [activeTabNav, setActiveTabNav] = useState(0);
  const handelTabNav = (index: number) => {
    setActiveTabNav(index);
  }
  return (
    <div className='MydesignCenZPBox'>
      <div className='MydesignCenZPTitle'><h2>作品</h2></div>
      {/* tab切换导航部分 */}
      <div className='MydesignCenZPTab'>
        <div className="MydesignCenZPNav">
          {tabsNav.map((tab, index) => (
            <div
              key={index}
              className={`tabList1 ${activeTabNav === index ? 'active' : ''}`}
              onClick={() => handelTabNav(index)}
            >
              {tab}
            </div>
          ))}
        </div>
      </div>
      {/* tab切换内容部分 */}
      <div className='MydesignCenZPCon'>
        {activeTabNav === 0 && <div className='TabContent1'>
          <ImagesConList></ImagesConList>
        </div>}
        {activeTabNav === 1 && <div className='TabContent2'>
          <div className="ConList1">
            <a href="">
              <ImageOverlay
                mainContent={<div className='oldSrc'>
                  <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/30/66e36909-f482-4232-b93d-6f5a57d50fef_thumb?v=1725242401000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" />
                  <div className='oldSrcText'>
                    <p>海报</p>
                    <h3>简约国庆节祝福问候海报</h3>
                    <span>2024-09-24</span>
                  </div>
                </div>}
                overlayContent={<div className='newSrc'>
                  <div className="blckText">
                    <button>预览</button>
                  </div>
                  <div className="whiteText">
                    {/* 编辑 */}
                    <DesignEdit></DesignEdit>
                    {/* 数据 */}
                    <DesignDate></DesignDate>
                    {/* 推广 */}
                    <DesignPromotion></DesignPromotion>
                  </div>
                </div>}
              />
            </a>
          </div>
        </div>}
        {activeTabNav === 2 && <div className='TabContent3'>
          <div className="ConList1">
            <a href="">
              <ImageOverlay
                mainContent={<div className='oldSrc'>
                  <img src="https://pub-cdn-oss.chuangkit.com/designTemplate/2023/09/11/1e3ff130-7e52-4a7c-bf69-3d8c4c024cd1_thumb?v=1717977600000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp" alt="" />
                  <div className='oldSrcText'>
                    <p>海报</p>
                    <h3>简约国庆节祝福问候海报</h3>
                    <span>2024-09-24</span>
                  </div>
                </div>}
                overlayContent={<div className='newSrc'>
                  <div className="blckText">
                    <button>预览</button>
                  </div>
                  <div className="whiteText">
                    {/* 编辑 */}
                    <DesignEdit></DesignEdit>
                    {/* 数据 */}
                    <DesignDate></DesignDate>
                    {/* 推广 */}
                    <DesignPromotion></DesignPromotion>
                  </div>
                </div>}
              />
            </a>
          </div>
        </div>}
        {activeTabNav === 3 && <div className='TabContent4'>Content for Tab 2</div>}
        {activeTabNav === 4 && <div className='TabContent5'>Content for Tab 2</div>}
        {activeTabNav === 5 && <div className='TabContent6'>Content for Tab 2</div>}
        {activeTabNav === 6 && <div className='TabContent7'>Content for Tab 2</div>}
        {activeTabNav === 7 && <div className='TabContent8'>Content for Tab 2</div>}
      </div>
    </div>
  )
}

export default Index